@margin-sm:   5px;
@margin-base: 10px;
@margin-lg:   15px;
@margin-xl:   30px;

@padding-sm:   5px;
@padding-base: 10px;
@padding-lg:   15px;
@padding-xl:   30px;

// Margins
// --------------------

.m0 { margin: 0 !important; }
.ml0 { margin-left: 0 !important; }
.mr0 { margin-right: 0 !important; }
.mt0 { margin-top: 0 !important; }
.mb0 { margin-bottom: 0 !important; }

.m  { margin: @margin-base !important; }
.ml { margin-left: @margin-base !important; }
.mr { margin-right: @margin-base !important; }
.mt { margin-top: @margin-base !important; }
.mb { margin-bottom: @margin-base !important; }

.m-sm  { margin: @margin-sm !important; }
.ml-sm { margin-left: @margin-sm !important; }
.mr-sm { margin-right: @margin-sm !important; }
.mt-sm { margin-top: @margin-sm !important; }
.mb-sm { margin-bottom: @margin-sm !important; }

.m-lg  { margin: @margin-lg !important; }
.ml-lg { margin-left: @margin-lg !important; }
.mr-lg { margin-right: @margin-lg !important; }
.mt-lg { margin-top: @margin-lg !important; }
.mb-lg { margin-bottom: @margin-lg !important; }

.m-xl  { margin: @margin-xl !important; }
.ml-xl { margin-left: @margin-xl !important; }
.mr-xl { margin-right: @margin-xl !important; }
.mt-xl { margin-top: @margin-xl !important; }
.mb-xl { margin-bottom: @margin-xl !important; }

// Margin vertical / horizontal
.mv { .mt; .mb; }
.mh { .ml; .mr; }

.mv-lg { .mt-lg; .mb-lg; }
.mh-lg { .ml-lg; .mr-lg; }

.mv-sm { .mt-sm; .mb-sm; }
.mh-sm { .ml-sm; .mr-sm; }

// Paddings
// --------------------

.p0 { padding: 0 !important; }
.pl0 { padding-left: 0 !important; }
.pr0 { padding-right: 0 !important; }
.pt0 { padding-top: 0 !important; }
.pb0 { padding-bottom: 0 !important; }
.pv0 { .pt0; .pb0; }
.ph0 { .pl0; .pr0; }

.p  { padding: @padding-base !important; }
.pl { padding-left: @padding-base !important; }
.pr { padding-right: @padding-base !important; }
.pt { padding-top: @padding-base !important; }
.pb { padding-bottom: @padding-base !important; }

.p-sm  { padding: @padding-sm !important; }
.pl-sm { padding-left: @padding-sm !important; }
.pr-sm { padding-right: @padding-sm !important; }
.pt-sm { padding-top: @padding-sm !important; }
.pb-sm { padding-bottom: @padding-sm !important; }

.p-lg  { padding: @padding-lg !important; }
.pl-lg { padding-left: @padding-lg !important; }
.pr-lg { padding-right: @padding-lg !important; }
.pt-lg { padding-top: @padding-lg !important; }
.pb-lg { padding-bottom: @padding-lg !important; }

.p-xl  { padding: @padding-xl !important; }
.pl-xl { padding-left: @padding-xl !important; }
.pr-xl { padding-right: @padding-xl !important; }
.pt-xl { padding-top: @padding-xl !important; }
.pb-xl { padding-bottom: @padding-xl !important; }


// Padding vertical / horizontal
.pv { .pt; .pb; }
.ph { .pl; .pr; }

.pv-xl { .pt-xl; .pb-xl; }
.ph-xl { .pl-xl; .pr-xl; }

.pv-lg { .pt-lg; .pb-lg; }
.ph-lg { .pl-lg; .pr-lg; }

.pv-sm { .pt-sm; .pb-sm; }
.ph-sm { .pl-sm; .pr-sm; }

//
// Form SWITCH
// Supports radio and checkbox
//
@ui-fg-color: @brand-primary;
@ui-bg-color: #ddd;

@switch-wd: 40px;
@switch-hg: @switch-wd/2;

@switch-lg-wd: 50px;
@switch-lg-hg: @switch-lg-wd/2;

@switch-sm-wd: 30px;
@switch-sm-hg: @switch-sm-wd/2;

.switch {
    .form-control {
        padding-top: 7px;
        margin-bottom: 0;
    }
}

.switch * {
    cursor: pointer;
}

.switch input {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

.switch {
    & span {
        position: relative;
        display: inline-block;
        width: @switch-wd; height: @switch-hg;
        background-color: #fff;
        border: 1px solid @ui-bg-color;
        border-radius: 100px;
        transition: all .5s;
        box-shadow: 1px 2px 3px rgba(0,0,0,0.1) inset;
        vertical-align: middle;
    }

    & span:after {
     content: "";
     position: absolute;
     background-color: #fff;
     top: 0; left: 0;
     height: @switch-hg - 2; width: @switch-hg - 2;
     border: 1px solid #ddd;
     border-radius: 400px;
     box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
     -webkit-transition: all .2s;
    } 
    
    &.switch-lg { .switch-variant(@switch-lg-wd, @switch-lg-hg); }
    &.switch-sm { .switch-variant(@switch-sm-wd, @switch-sm-hg); }
}


.switch input:checked + span {
    background-color: @ui-fg-color;
    border-color: @ui-fg-color;
    transition: all .5s;
}

.switch input:checked + span:after {
    left: 50%;
    transition: all .2s;
}

.switch-variant(@wd, @hg) {
    & span {
        width: @wd; height: @hg;
    }

    & span:after {
     height: @hg - 2; width: @hg - 2;
    }  
}

.form-signin {
    width: 25%;
    margin: 0 auto;
    padding-top: 100px;
}
.form-control {
    height: 45px;
}
.form-signin .btn {
    margin-top: 20px;
}

body {
    background-color: #ecebeb;
    .container {
        background-color: #fff;
        padding: 0;
    }
}
// change-info
.info {
    .user-info {
        .user {
            width: 30%;
            margin: 0 auto;
            .username {
                border-radius: 4px;
                display: block;
                border: 1px solid #ccc;
       
                height: 45px;
                background-color: #EDDCC8;
                color: #454A59;
                font-size: 27px;
                text-align: center;
                font-weight: 800;
                line-height: 42px;
            }
            .userimg {
                width: 140px;
                height: 140px;
                
                margin: auto;
                margin-top: 50px;
                margin-bottom: 15px;
                img {
                    position: absolute;
                    width: 100px;
                    height: 100px;
                    margin-left: 20px;
                    margin-top: 17px;
                    
                }
                .shade { 
                    width: 100%;
                    height: 100%;
                    background-color:#000000; 
                    opacity:0.5; 
                    -moz-opacity:0.5; 
                    filter:alpha(opacity=50);                
                    border-radius: 50%;
                    text-align: center;
                    line-height: 148px;
                    font-size: 32px;
                    color: #fff;
                    
                    .camera {
                        opacity:0.8; 
                        -moz-opacity:0.8; 
                        filter:alpha(opacity=80);  
                    }
                }
            }
            .useraccount {
                margin: 7px 0;
                color: #AEAEAE;
                display: block;
                text-align: center;
            }
        }
    }
    form {
        width: 46%;
        margin: 0 auto;

        label {
           color: #979797
        }
        .btn {
            width: 120px;
            height: 45px;
            font-size: 18px;
        }
        .center {
            text-align: center;
            .confirm {
                color: #fff;
                background-color: #2E97D8;
            }

            .cancel {
                border: 2px solid #ec8577;
                color: #ec8577;
            }        
        }

    }  
}

//seller page

.revise {
    a {
        background-color: #5CA2DC;
        color: #fff;
        margin: 0 auto;
        display: block;
        width: 11%;
        margin-top: 45px;
        margin-bottom: 20px;
    }
    a:hover {
        background-color: #286090;
    }
}
.system-notice {
    width: 65%;
    span {
        color: #AFAFB0;
        
    }
    .notice {
        width: 100%;
        height: 3px;
        border-radius: 2px;
        background-color: #73A6D8;
    }
}

//sellerChange page 

.seller-info {
    overflow: hidden;
    width: 100%;
    background-color: #F8F2EB;
    .info {
        width: 60%;       
        margin-top: 50px;
        .intercalate {
            background-color: #fff;
            height: 76px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            span {
                font-size: 24px;
                font-weight: bold;
                color: #454545;
                display: block;
                text-align: center;
                line-height: 83px;
            }
        }
        .datum {
            overflow: hidden;
            margin-top: 3px;
            background-color: #fff;
            .contact-way {
                color: #484949;
                text-align: center;
                margin-top: 20px;
                font-size: 16px;
                font-weight: bold;
                margin-bottom: 30px;
                .address {
                    padding: 15px;
                    margin-top: 10px;
                    display: block;
                }
            }
        }
        .set-datum {
            margin-top: 3px;
            background-color: #fff;  
            padding: 35px;          
        }
    }
}